<?php if ($booths): ?>
  <style>
    ul.thumbnails li.position-promotion {
      width: 463px; 
      height: 411px;
    }
    ul.thumbnails li a {
      display: block; 
      height: 155px; 
      position: relative;
    }
    ul.thumbnails li.position-promotion a {
      height: 368px; 
    }
    ul.thumbnails li img {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      max-width: 224px;
      max-height: 155px;
    }
    ul.thumbnails li.position-promotion img {
      width: 464px;
      height: 368px;
      max-width: 464px;
      max-height: 368px;
    }
    .dashed {
      margin-top: 6px; 
      border: 1px dashed #C6C6C6;
    }
  </style>
  <?php if(!isset($extra)): ?>
    <ul class="thumbnails items">
  <?php endif; ?>
  
  <?php $i = 0; foreach ($booths as $booth): ?> 
    <?php if ($i == 0 || $i == 11): ?>
      <li class="position-promotion" style="<?php if($i == 11):?>float:right;<?php endif; ?>">
        <a href="/gian-hang/<?php echo $booth['slug']; ?>" >
		  <img src="<?php echo base_url("upload/booth/{$booth['user_id']}/avatar/{$booth['avatar']}"); ?>">
        </a>
        <div class="caption">
          <div class="dashed"></div>
          <h6><?php echo characterLimiter($booth['name'], 64); ?></h6>
          <div><?php echo getBoothCategories($booth['category_id']); ?></div>
        </div>
      </li>
    <?php else: ?>
      <li>
        <a href="/gian-hang/<?php echo $booth['slug']; ?>" >
          <img src="<?php echo base_url("upload/booth/{$booth['user_id']}/avatar/{$booth['avatar']}"); ?>">
        </a>
        <div class="caption">
          <div class="dashed"></div>
          <h6><?php echo characterLimiter($booth['name'], 30); ?></h6>
          <div><?php echo getBoothCategories($booth['category_id']); ?></div>
        </div>
      </li>
    <?php endif; ?>
  <?php $i++; endforeach; ?>
  
  <?php if(!isset($extra)): ?>
    </ul>
    <script type="text/javascript">
      // Thanh cuộn load thêm nội dung
      $(document).ready(function(){    	  
        var extra=0;
        window.onscroll=function(){
          scrollY=window.pageYOffset;
          scrollMaxY=document.documentElement.scrollHeight-document.documentElement.clientHeight;
          if(scrollY==scrollMaxY){
        	  extra++; //s tăng lên một mỗi lần cuộn 
        	var url = '<?php echo base_url('booth/index'); ?>';
        	var url = url + '\/' + extra + '/true';
        
        	$.get(url, function(data) {
         	  $('.items').append(data); // append to <ul>	 	  
         	});
          }
        }; // end onscroll
      });
    </script> 
  <?php endif; ?>
  
<?php endif; ?>